<template>
  <div class="subscription-page">
    <div
      class="video-list"
      v-if="subscribeList.length > 0"
    >
      <div
        v-for="video in subscribeList"
        :key="video.id"
        class="video-card"
      >
        <div
          class="author-info"
          @click="locateToUserProfile(video.userId)"
        >
          <a-avatar
            :src="video.avatarUrl"
            size="large"
          />
          <span class="author-name">{{ video.nickname }}</span>
        </div>
        <img
          :src="video.thumbnailUrl"
          alt="视频封面"
          class="video-cover"
          @click="locateToVideoPage(video.videoId)"
        />
        <div class="video-details">
          <h3
            class="video-title"
            @click="locateToVideoPage(video.videoId)"
            >{{ video.title }}</h3
          >
          <p class="publish-time">发布时间: {{ timeFormat(video.publishTime) }}</p>
          <div class="stats">
            <p>播放量: {{ formatNumber(video.viewCount) }}</p>
            <p>评论数量: {{ formatNumber(video.commentCount) }}</p>
          </div>
        </div>
      </div>
      <Pagination
        style="margin-top: 20px"
        v-model:page="queryParams.pageNo"
        v-model:limit="queryParams.pageSize"
        :total="total"
        @pagination="getSubscribedData"
      />
    </div>

    <div v-else>
      <a-empty />
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import type { CvSubscribeRespVO, CvSubscribeSearchReqVO } from '@/types/subscribe'
import { getSubscribePage } from '@/api/subscribe'
import { onMounted } from 'vue'
import dayjs from 'dayjs'

const router = useRouter()

/**
 * 查询参数
 */
const queryParams = ref<CvSubscribeSearchReqVO>({
  pageNo: 1,
  pageSize: 10
})

/**
 * 订阅列表
 */
const subscribeList = ref<CvSubscribeRespVO[]>([])
const total = ref(0)

onMounted(() => {
  getSubscribedData()
})

/**
 * 获取订阅分页数据
 */
const getSubscribedData = async () => {
  const res = await getSubscribePage(queryParams.value)
  subscribeList.value = res.list
  total.value = res.total
}

/**
 * 播放量格式化
 */
const formatNumber = (num: number) => {
  if (!num) {
    return 0
  }

  if (num >= 1000 && num < 10000) {
    return (num / 1000).toFixed(1) + 'K'
  } else if (num >= 10000) {
    return (num / 10000).toFixed(1) + 'W'
  } else {
    return num.toString()
  }
}

/**
 * 时间格式化
 */
const timeFormat = (time: string) => {
  if (time) {
    return dayjs(time).format('YYYY-MM-DD HH:mm')
  }
  return ''
}

/**
 * 跳转到视频页面
 */
const locateToVideoPage = (videoId: number) => {
  videoId && window.open(`/video?videoId=${videoId}`)
}

/**
 * 跳转到用户个人主页
 */
const locateToUserProfile = (userId: number) => {
  userId && window.open(`/profile?userId=${userId}`)
}
</script>

<style scoped>
.subscription-page {
  padding: 20px;
}

.video-list {
  margin-top: 20px;
}

.video-card {
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  display: flex;
  transition: box-shadow 0.3s;
  cursor: pointer;
  gap: 20px;
}

.video-card:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.author-info {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.author-name {
  font-weight: bold;
  font-size: 16px;
  margin-left: 8px;
}

.video-cover {
  width: 150px;
  height: 120px;
  margin-right: 16px;
}

.video-details {
  flex: 1;
}

.video-title {
  font-size: 16px;
  font-weight: bold;
  margin: 8px 0;
}

.publish-time {
  margin: 4px 0;
}

.stats {
  display: flex;
  justify-content: space-between;
}
</style>
